<template>
  <div class="chatwrapper flex" :class="{ minchat: isCollapse }">
    <div class="chatside flexcolumn h_full">
      <div class="sideheader w_full flexcolumn">
        <div class="w_full titlebox flexbetween">
          <div class="flex aligncenter">
            <img
              src="@/assets/images/side.png"
              alt=""
              class="sideimg commhover"
              @click="handleWrap"
            />
            <span v-if="!isCollapse" class="pl-12 c_999 f-14"
              >收起企微号列表</span
            >
          </div>
          <div v-if="!isCollapse">
            <i class="el-icon-search f-20 c_999 commhover" :class="{c_warning2:issearch}" @click="handleSearchWrapper"></i>
          </div>
        </div>
        <div v-if="issearch" class="searchbox">
          <el-form ref="queryform" :model="queryform" label-width="0">
            <el-form-item label="" class="mb-6" prop="keyword">
              <el-input
                v-model="queryform.keyword"
                size="small"
                placeholder="输入关键词"
              ></el-input>
            </el-form-item>
            <el-form-item label="" class="mb-0">
              <el-select
                v-model="queryform.group"
                size="small"
                placeholder="选择分组"
                class="w_full"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="imchatlist">
        <el-menu
          :default-active="activeMenu"
          class="menu-list"
          background-color="#262626"
          :collapse="isCollapse"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="(item, index) in userlist"
            :key="index"
            :index="item.id"
            class="flex aligncenter"
            :class="{ fillter: item.status == 2 }"
          >
            <div class="avatarbox">
              <img
                src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                alt=""
                class="menu_avatar"
              />
            </div>
            <div
              slot="title"
              class="userbox flexcolumn justifycenter pl-12 pr-12"
            >
              <span
                class="textover f-14 mb-2"
                :class="item.status == 2 ? 'c_888999' : 'c_fff'"
                >Gardenia{{item.status}}</span
              >
              <span
                class="dec f-12 mt-2"
                :class="item.status == 2 ? 'c_fff' : 'c_888999'"
                >志新</span
              >
            </div>
            <!-- <span slot="title">Gardenia</span> -->
          </el-menu-item>
        </el-menu>
      </div>
      <div class="sidetip p-8 m-12 c_999 f-12">
        没找到企微号？前往<span class="c_primary">聊天配置</span>中开启
      </div>
    </div>
    <div class="chatcontainer">
      <chat-content :key="keys" :rowitem="rowitem" />
    </div>
  </div>
</template>

<script>
import ChatContent from "./ChatContent.vue";
export default {
  data() {
    return {
      isCollapse: false,
      issearch: false,
      queryform: {
        keyword: "",
        group: "",
      },
      activeMenu: "1",
      userlist: [
        { id: "1", name: "Gardenia", status: 1 },
        { id: "2", name: "Gardenia2", status: 2 },
      ],
      keys:'',
      rowitem:null
    };
  },
  computed: {
  },
  components: {
    ChatContent,
  },
  created(){
    this.handleSelect(this.activeMenu);
  },
  methods: {
    handleWrap() {
      this.isCollapse = !this.isCollapse;
    },

    handleSearchWrapper(){
      this.issearch = !this.issearch
    },

    handleSelect(val) {
      let u_item = null;
      this.userlist.forEach((item) => {
        if (item.id == val) {
          u_item = item;
        }
      });
      console.log('111111:', val, u_item)
      this.rowitem = u_item
      this.keys = Date.now();
      console.log("val", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.chatwrapper {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}
.chatside {
  width: 260px;
  background-color: #262626;
}
.sideheader {
  position: sticky;
  top: 0;
  z-index: 11;
  border-bottom: 1px solid #333;
}
.titlebox {
  padding: 0 20px;
  height: 46px;
}
.searchbox {
  padding: 0 16px;
}
.sideimg {
  height: 20px;
}
.sidetip {
  background-color: hsla(0, 0%, 100%, 0.05);
}
.imchatlist {
  flex: 1;
  //   height: calc(100% - 106px);
  padding: 8px 0 0 8px;
  //   height: 100%;
}
.menu-list {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  border-right: 0;
  .el-menu-item {
    height: 60px;
    padding-left: 12px !important;
    line-height: normal;
    border-radius: 4px;
    //
    &.fillter {
      filter: grayscale(100%);
    }
    &.is-active {
      background-color: #1890ff !important;
      .dec {
        color: #fff;
      }
    }
  }
  .avatarbox {
    width: 40px;
    height: 40px;
    .menu_avatar {
      width: 40px;
      height: 40px;
      border-radius: 4px;
      vertical-align: initial;
    }
  }
  .userbox {
    height: 40px;
    flex: 1;
  }
  ::v-deep .el-tooltip {
    padding: 0px 12px !important;
    display: flex !important;
    align-items: center !important;
  }
}
.chatcontainer{
  width: calc(100vw - 260px);
  height: 100%;
}
.minchat {
  .chatside {
    width: 88px;
  }
  .searchbox{
    display: none;
  }
  .chatcontainer{
    width: calc(100vw - 88px);
  }
}
</style>